<%@ page language="java" contentType="text/html; charset=UTF-8"
		 pageEncoding="UTF-8"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/";
%>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
	<base href="<%=basePath%>">
	<meta charset="UTF-8">
	<title>用户注册</title>
	<style>
		body, html {
			height: 100%;
			margin: 0;
			font-family: Arial, sans-serif;
		}
		body {
			background-image: url('image/back.png');
			background-size: cover;
			background-position: center;
			display: flex;
			justify-content: center; /* 居中对齐 */
			align-items: center;
		}
		.container {
			background-color: rgba(255, 255, 255, 0.8); /* 半透明白色背景 */
			padding: 20px;
			border-radius: 8px;
			box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
			width: 400px;
			text-align: center;
		}
		h4 {
			color: #333;
			margin-bottom: 20px;
		}
		label {
			display: block;
			margin-bottom: 5px;
			color: #666;
			font-size: 14px;
		}
		input[type="text"],
		input[type="password"],
		input[type="email"],
		input[type="tel"] {
			width: calc(100% - 22px);
			padding: 10px;
			margin-bottom: 15px;
			border: 1px solid #ccc;
			border-radius: 4px;
		}
		input[type="submit"] {
			background-color: #007BFF;
			color: white;
			border: none;
			padding: 10px 20px;
			cursor: pointer;
			border-radius: 4px;
			transition: background-color 0.3s ease;
		}
		input[type="submit"]:hover {
			background-color: #0056b3;
		}
		button[type="reset"] {
			background-color: #6c757d;
			color: white;
			border: none;
			padding: 10px 20px;
			cursor: pointer;
			border-radius: 4px;
			transition: background-color 0.3s ease;
		}
		button[type="reset"]:hover {
			background-color: #495057;
		}
		.return-button {
			background-color: #6c757d;
			color: white;
			border: none;
			padding: 10px 20px;
			cursor: pointer;
			border-radius: 4px;
			transition: background-color 0.3s ease;
			text-decoration: none;
		}
		.return-button:hover {
			background-color: #495057;
		}
	</style>
	<script>
		function validatePassword() {
			var password = document.forms["myform"]["password"].value;
			var confirmPassword = document.forms["myform"]["confirmPassword"].value;

			if (password !== confirmPassword) {
				alert("两次输入的密码不一致！");
				return false;
			}
			return true;
		}
	</script>
</head>
<body>
<div class="container">
	<h4>用户注册</h4>
	<form name="myform" action="userInsert" method="post" onsubmit="return validatePassword()">
		<div class="form-group row">
			<label class="col-sm-3 col-form-label">姓名</label>
			<div class="col-sm-9">
				<input type="text" class="form-control" name="username" placeholder="请输入用户名" required />
			</div>
		</div>
		<div class="form-group row">
			<label class="col-sm-3 col-form-label">密码</label>
			<div class="col-sm-9">
				<input type="password" class="form-control" name="password" placeholder="只能包含字母或数字" required />
			</div>
		</div>
		<div class="form-group row">
			<label class="col-sm-3 col-form-label">确认密码</label>
			<div class="col-sm-9">
				<input type="password" class="form-control" name="confirmPassword" placeholder="请再次输入密码" required />
			</div>
		</div>
		<!-- 添加邮箱输入框 -->
		<div class="form-group row">
			<label class="col-sm-3 col-form-label">邮箱</label>
			<div class="col-sm-9">
				<input type="email" class="form-control" name="email" placeholder="请输入邮箱地址" required />
			</div>
		</div>
		<!-- 添加手机号输入框 -->
		<div class="form-group row">
			<label class="col-sm-3 col-form-label">手机号</label>
			<div class="col-sm-9">
				<input type="tel" class="form-control" name="phone" placeholder="请输入手机号码" required pattern="^1[3-9]\d{9}$" />
			</div>
		</div>
		<!-- ... -->
		<div class="form-group">
			<div class="col-sm-12 text-center">
				<input type="submit" value="注册" />
				<a href="login.jsp" class="return-button">返回</a>
			</div>
		</div>
	</form>
</div>
</body>
</html>
